<template>
  <!-- <el-button type="danger" icon="el-icon-delete" @click="logout">退出</el-button> -->
  <el-container>
    <!-- 头部区域 -->
    <el-header>
      <div id="logo">
        <img class="logoico" src="../../assets/logo.png" alt />
        <span class="logotext">后台管理系统</span>
      </div>
      <el-button type="danger" icon="el-icon-delete" @click="logout">退出</el-button>
    </el-header>
    <el-container>
      <!-- 侧边栏区域 -->
      <el-aside width="200px">
        <el-input placeholder="输入关键字进行过滤" v-model="filterText"></el-input>
        <el-tree
          class="filter-tree"
          :data="menuData"
          :props="defaultProps"
          default-expand-all
          :expand-on-click-node="false"
          :filter-node-method="filterNode"
          ref="tree"
          @node-click="treeClick"
        ></el-tree>
      </el-aside>
      <!-- 右侧主题区域 -->
      <el-main>
        <!-- 路由占位符 -->
        <list v-if="show" :fdata="data" :g4="g4" @fEvent="childrenEvent" />
        <router-view v-else></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script>
import list from "./list";
export default {
  components: { list },
  props: ["fshow"],
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },
  data() {
    return {
      filterText: "",
      menuData: [],
      g4: null,
      defaultProps: {
        children: "children",
        label: "label"
      },
      manage: false,
      routerData: 123,
      childrenShow: true,
      data: [],
      show: false,
      tableData: {
        users: [
          { label: "用户名", prop: "username" },
          { label: "姓名", prop: "name" },
          { label: "电话", prop: "tel" },
          { label: "角色", prop: "type" }
        ],
        items: [
          { label: "名称", prop: "name" },
          { label: "起始时间", prop: "beginTime" },
          { label: "终止时间", prop: "endTime" },
          { label: "价格", prop: "price" }
        ],
        itemsOther: [
          { label: "ID", prop: "ID" },
          { label: "名称", prop: "name" },
          { label: "重要说明", prop: "info" },
          { label: "修改时间", prop: "changeTime" }
        ],
        transactionLog: [
          { label: "商品名称", prop: "itemName" },
          { label: "创建时间", prop: "createTime" },
          { label: "执行时间", prop: "useTime" },
          { label: "购买数量", prop: "max" },
          { label: "车型", prop: "cars" },
          { label: "金额", prop: "money" }
        ],
        shoppingTrolleys: [
          { label: "商品名称", prop: "itemName" },
          { label: "创建时间", prop: "createTime" },
          { label: "执行时间", prop: "useTime" },
          { label: "购买数量", prop: "max" },
          { label: "车型", prop: "cars" },
          { label: "金额", prop: "money" }
        ],
        itemEval: [
          { label: "修改时间", prop: "createTime" },
          { label: "标题", prop: "name" },
          { label: "评价内容", prop: "info" },
          { label: "评价目标", prop: "itemID" },
          { label: "评分", prop: "score" },
          { label: "用户", prop: "user" }
        ],
        itemType: [
          { label: "修改时间", prop: "createTime" },
          { label: "标题", prop: "name" },
          { label: "详细内容", prop: "info" },
          { label: "状态", prop: "state" },
          { label: "用户类型", prop: "userType" },
          { label: "主页显示数", prop: "displayNum" }
        ],
        cars: [
          { label: "修改时间", prop: "createTime" },
          { label: "标题", prop: "name" },
          { label: "详细内容", prop: "info" },
          { label: "状态", prop: "state" },
          { label: "单价", prop: "price" }
        ],
        notice: [
          { label: "修改时间", prop: "createTime" },
          { label: "标题", prop: "name" },
          { label: "详细内容", prop: "info" },
          { label: "状态", prop: "state" }
        ],
        promise: [
          { label: "修改时间", prop: "createTime" },
          { label: "标题", prop: "name" },
          { label: "详细内容", prop: "info" },
          { label: "状态", prop: "state" }
        ]
      }
    };
  },
  methods: {
    childrenEvent(val) {
      switch (val) {
        case 1:
          this.show = false;
          break;

        default:
          console.log(val);
          break;
      }
    },
    logout() {
      this.$router.replace("/admin/login");
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    treeClick(a, b, c) {
      // console.log(this.$cp(a));
      let path = a.table;
      sessionStorage.removeItem("key");
      sessionStorage.removeItem("val");
      if (b.parent.data.table) {
        path = b.parent.data.table;
        sessionStorage.setItem("key", a.key);
        sessionStorage.setItem("val", a.val);
      }
      sessionStorage.setItem("table", path);
      // console.log(path, a);
      this.data = {
        table: this.tableData[path],
        label: a.label,
        manage: this.manage,
        cmd: {
          cmd: 0,
          val: {
            token: sessionStorage.getItem("token"),
            table: path
          }
        }
      };
      if (a.key) this.data.cmd.val[a.key] = a.val;
      if (path == "items" && a.val == 1) {
        this.data.table = this.tableData["itemsOther"];
      }
      // console.log(this.$cp(this.data));
      this.show = true;
      this.childrenChange(true);
      // this.$router.push(path)
    },
    childrenChange(val) {
      if (val) {
        this.childrenShow = false;
        this.childrenShow = true;
      } else {
        this.childrenShow = !this.childrenShow;
      }
    },
    testFun() {
      console.log(123);
    }
  },
  created() {
    this.show = false;
    this.$axios
      .post("/q.php", {
        cmd: 1004,
        val: {
          token: sessionStorage.getItem("token")
        }
      })
      .then(result => {
        if (result.data) {
          // console.log(this.$cp(result.data));
          // return;
          this.menuData = result.data;
          this.manage = this.menuData.length > 5 ? true : false;
        } else {
          this.$message({
            showClose: true,
            message: "发生错误!服务器繁忙或登录时间失效",
            type: "error"
          });
        }
        // console.log(this.$cp(result.data));
      })
      .catch(err => {
        this.$message.error("发生错误!\n错误原因:" + err);
      });
    this.$axios
      .post("/q.php", {
        cmd: 1005,
        val: 0
      })
      .then(result => {
        if (result.data){
          // console.log(this.$cp(result.data));
          this.g4 = result.data;
        }
        else {
          this.$message({
            showClose: true,
            message: "发生错误2!服务器繁忙或登录时间失效",
            type: "error"
          });
        }
      })
      .catch(err => {
        this.$message.error("发生错误2!\n错误原因:" + err);
      });
  }
};
</script>

<style lang="less" scoped>
.el-container {
  // margin-bottom: 40px;
  height: 100%;
}
.el-header {
  background-color: #373d41;
  display: flex;
  justify-content: space-between;
  padding-left: 5px;
  align-items: center;
  color: #fff;
  font-size: 20px;
  > div {
    display: flex;
    align-items: center;
    height: 100%;
    img {
      max-height: 100%;
    }
    span {
      padding-left: 15px;
    }
  }
}
.el-aside,
.el-tree {
  background-color: #eee;
  // color: #0bb3f5;
}
.el-man {
  background-color: #0a71f7;
}
</style>